<template>
    <el-dialog
        v-model="dialogVisible"
        title="图片上传"
        width="220px"
        :before-close="handleClose"
    >
        <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :http-request="handleUpload"
            :before-upload="beforeUpload"
        >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
    </el-dialog>
</template>

<script lang="ts" setup>
// import axios from 'axios';
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
// import { uploadImg } from '@/request/activity';
// import COS from 'cos-js-sdk-v5';
import type { UploadProps, UploadRequestOptions } from 'element-plus';
const dialogVisible = ref<boolean>(false);
const imageUrl = ref('');

console.log('window', window);
const props = withDefaults(
    defineProps<{
        uploadImg: string;
        uploadModel: boolean;
    }>(),
    {
        uploadImg: '',
        uploadModel: false,
    }
);
watch(props, (n, l) => {
    const { uploadImg, uploadModel } = n;
    dialogVisible.value = uploadModel;
    imageUrl.value = uploadImg;
});
const emit = defineEmits<{
    (e: 'cb', url: string): void;
    (e: 'close'): void;
}>();
const handleUpload = (options: UploadRequestOptions) => {
    const { file } = options;

    if (
        process.env.NODE_ENV === 'development' ||
        process.env.NODE_ENV === 'production'
    ) {
        // 阿里图片上传
        uploadImg({ name: file.name, file: file }).then((res) => {
            if (res.code === 200) {
                emit('cb', `${res.message}`);
            }
        });
    } else {
        uploadTengxunImg(file);
    }
    console.log();
};
// 腾讯图片上传
const uploadTengxunImg = (file) => {
    var timestamp = new Date().getTime();
    console.log(timestamp);
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    const cos = new COS({
        SecretId: 'AKIDhBcs04OrWwOfgSt0mLtKXVMhqkbCKkT3',
        SecretKey: '4w2vZ2yi4C7xYMN8cFsLuJwRimvnSvId',
    });
    const Bucket = 'clan-img-1304137023';
    const Region = 'ap-shanghai';
    cos.putObject(
        {
            Bucket,
            Region,
            Key: `client/admin_test${timestamp}/${file.name}`,
            StorageClass: 'STANDARD',
            Body: file,
            onProgress: (progressData) => {
                console.log('上传的进度', progressData);
            },
        },
        (err, data) => {
            if (err) {
                return;
            }
            emit('cb', `http://${data.Location}`);
        }
    );
};
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (
        !['image/jpeg', 'image/jpg', 'image/png', 'image/gif'].includes(
            rawFile.type
        )
    ) {
        ElMessage.error('图片格式必须为jpeg，jpg，png，gif');
        return false;
    } else if (rawFile.size / (1024 * 1024) > 5) {
        ElMessage.error('图片大小不能大于5M');
        return false;
    }
    return true;
};
const handleClose = () => {
    emit('close');
};
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
